<template>
  <div class="forget">
    <div class="steps">
      <el-steps :active="current" align-center>
        <el-step title="验证身份"></el-step>
        <el-step title="重置密码"></el-step>
        <el-step title="完成设置"></el-step>
      </el-steps>
    </div>
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="ruleForm">
      <div v-if="current === 1">
        <el-form-item prop="phone">
          <el-input
            ref="phone"
            :readonly="readonly"
            @blur="onBlur"
            @focus="onFocus"
            v-model="ruleForm.phone"
            prefix-icon="el-icon-mobile-phone"
            placeholder='请输入手机号码'
            clearable
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="message">
          <el-input
            ref="message"
            maxlength="6"
            v-model="ruleForm.message"
            prefix-icon="el-icon-message"
            placeholder='短信验证码'
            clearable
            autocomplete="off"
          >
            <el-button type="text" slot="suffix" class="code" @click="sendCode" :disabled="disabled">{{text}}
            </el-button>
          </el-input>
        </el-form-item>
      </div>
      <div v-if="current === 2">
        <el-form-item prop="password">
          <el-input
            @blur="onBlur"
            @focus="onFocus"
            :readonly="readonly"
            type="password"
            v-model="ruleForm.password"
            prefix-icon="el-icon-lock"
            placeholder='请输入密码'
            clearable
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="checkPass">
          <el-input
            @blur="onBlur"
            @focus="onFocus"
            :readonly="readonly"
            type="password"
            v-model="ruleForm.checkPass"
            prefix-icon="el-icon-lock"
            placeholder='请再次输入密码'
            clearable
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </div>
      <div v-if="current === 3" class="finish">
        <img :src="check" alt="" class="check">
        <span class="text">密码设置完成</span>
      </div>
      <el-form-item>
        <el-button class="submitBtn" type="primary" @click.prevent="submitForm('ruleForm')" size="small"
                   :loading="loading">
          {{current === 3?"立即登录":"下一步"}}
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {forgetCheck, forgetChange, messageSend} from '../../utils/api';
  // 找回密码
  export default {
    name: "Forget",
    data() {
      const validatePass = (rule, value, callback) => {
        const reg = /^[0-9A-Za-z]{6,16}$/;
        if (value === '') {
          callback(new Error('请输入密码'));
        }
        else if (!reg.test(value)) {
          callback(new Error('请输入正确的密码'));
        }
        else {
          callback()
        }
      };
      const validateCheckPass = (rule, value, callback) => {
        const reg = /^[0-9A-Za-z]{6,16}$/;
        if (value === '') {
          callback(new Error('请再次输入密码'));
        }
        else if (value !== this.ruleForm.password) {
          callback(new Error('两次输入密码不一致!'));
        }
        else if (!reg.test(value)) {
          callback(new Error('只能是6~16位数字或字母'));
        }
        else {
          callback();
        }
      };
      const validatePhone = (rule, value, callback) => {
        const reg = /^1\d{10}$/;
        if (value === '') {
          callback(new Error('请输入手机号码'));
        }
        else if (!reg.test(value)) {
          callback(new Error('请输入正确的手机号码'));
        }
        else {
          callback()
        }
      };
      return {
        check: require('../../assets/images/check.png'),
        current: 1,
        readonly: true,
        loading: false,
        ruleForm: {
          password: '',//新密码
          checkPass: '',//确认密码
          phone: '',
          message: ''
        },
        rules: {
          password: [
            {validator: validatePass, trigger: 'change'}
          ],
          checkPass: [
            {validator: validateCheckPass, trigger: ['change', 'blur']}
          ],
          phone: [
            {validator: validatePhone, trigger: 'change'}
          ],
          message: [
            {required: true, message: '请输入短信验证码', trigger: 'change'}
          ],
        },
        text: '获取验证码',
        timer: null,
        disabled: false,//禁用发送按钮
        userId: '',//用户id,验证码获取
      }
    },
    methods: {
      onFocus() {
        this.readonly = false;
      },
      onBlur() {
        this.readonly = true;
      },
      //提交
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            if (this.current === 1) {
              const params = {
                phone: this.ruleForm.phone,
                code: this.ruleForm.message
              };
              this.postRequest(forgetCheck, params)
                .then(res => {
                  if (res.code === 200) {
                    this.userId = res.data.id;
                    this.$refs[formName].resetFields();
                    this.current = 2;
                  }
                  else {
                    this.ruleForm.message = "";
                    this.current = 1;
                  }
                })
                .catch(err => {
                  this.ruleForm.message = "";
                  this.current = 1;
                });
            }
            else if (this.current === 2) {
              const params = {
                id: this.userId,
                password: this.ruleForm.password,
                password2: this.ruleForm.checkPass
              };
              this.postRequest(forgetChange, params)
                .then(res => {
                  if (res.code === 200) {
                    this.current = 3;
                    this.clear();
                  }
                  else {
                    this.current = 2;
                  }
                })
                .catch(err => {
                  this.current = 2;
                });
            }
            else {
              this.$emit('changeLogin');
              this.current = 1;
            }
          }
          else {
            return false;
          }
        });
      },
      clear() {
        this.ruleForm.password = "";
        this.ruleForm.checkPass = "";
        this.ruleForm.phone = "";
        this.ruleForm.message = "";
      },
      //发送验证码
      sendCode() {
        const reg = /^1\d{10}$/;
        if (!reg.test(this.ruleForm.phone) || !this.ruleForm.phone || this.ruleForm.phone === "" || this.ruleForm.phone === null) {
          this.$refs.ruleForm.validateField('phone');
          return false;
        }
        this.postRequest(messageSend, {phone: this.ruleForm.phone})
          .then(res => {
            let num = 60;
            this.disabled = true;
            this.text = '已发送 ' + num + 's';
            this.timer = setInterval(() => {
              num--;
              this.text = '已发送 ' + num + 's';
              if (num <= 0) {
                this.resetCode();
              }
            }, 1000);
            if (res.code !== 200) this.resetCode();
          })
          .catch(err => {
            this.resetCode();
          });
      },
      resetCode() {
        clearInterval(this.timer);
        this.text = '获取验证码';
        this.disabled = false;
      },
    }
  }
</script>

<style scoped>
  @import "../../assets/style/login.css";

  .finish {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 24px auto;
  }

  .check {
    width: 93px;
    height: 78px;
  }

  .text {
    font-size: 15px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 48px;
    color: rgba(64, 158, 255, 1);
  }

  .steps {
    margin-bottom: 24px;
  }

  .steps >>> .el-step__icon {
    background: white;
  }

  .steps >>> .el-step__head.is-wait, .steps >>> .el-step__head.is-process, .steps >>> .el-step__title.is-process {
    color: #9EA0A5 !important;
    border-color: #9EA0A5 !important;
  }

  .steps >>> .el-step__line {
    background-color: #9EA0A5 !important;
  }

  .steps >>> .el-step__title {
    font-family: Microsoft YaHei;
    font-weight: 400 !important;
  }
</style>
